<template>
  <div class="goodsDetail">
    <div class="title">中国石油青海油田公司发料单</div>
    <div class="title2">
      <img id="barcode" class="cav" />
    </div>
    <div class="goodsDetail-border">
      <div class="flex_align border-div">
        <div class="mr20">
          <div class="w130">{{ translate('编号') }}：</div>
          <div class="w320">{{ formInfo.OBNo }}</div>
        </div>
      </div>
      <div class="flex_align border-div">
        <div class="mr20">
          <div class="w130">{{ translate('领料单位') }}：</div>
          <div class="w320">{{ formInfo.POUnit }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('项目') }}：</div>
          <div class="w320">{{ formInfo.ProName }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('工单') }}：</div>
          <div class="w320">{{ formInfo.SourceBillNo }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('日期') }}：</div>
          <div class="w320">{{ formInfo.DeliveryDate }}</div>
        </div>
        <!-- <div class="mr20">
          <div class="w130">{{ translate('出库类型') }}：</div>
          <div class="w320">
            {{ formInfo.OBType === '1' ? translate('委托仓储出库') : '' }}
          </div>
        </div> -->
        <!-- <div class="mr20">
          <div class="w130">{{ translate('金额单位') }}：</div>
          <div class="w320">元</div>
        </div> -->
      </div>
      <div class="flex_align border-div">
        <!-- <div class="mr20">
          <div class="w130">{{ translate('用料单位') }}：</div>
          <div class="w320">{{ formInfo.POUnit }}</div>
        </div> -->
        <!-- <div class="mr20">
          <div class="w130">{{ translate('提货单位') }}：</div>
          <div class="w320">{{formInfo.POUnit}}</div>
        </div> -->
        <div class="mr20">
          <div class="w130">{{ translate('发货单位') }}：</div>
          <div class="w320">{{ formInfo.CustomNo }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('发货仓库') }}：</div>
          <div class="w320">{{ formInfo.WHName }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('物料凭证') }}：</div>
          <div class="w320">{{ formInfo.LCNo }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('会计凭证') }}：</div>
          <div class="w320">{{ formInfo.CarNum }}</div>
        </div>
      </div>
      <!-- <div class="flex_align border-div">
        <div class="mr20">
          <div class="w130">{{ translate('项目名称') }}：</div>
          <div class="w320">{{ formInfo.ProName }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('子项目名称') }}：</div>
          <div class="w320">{{ formInfo.CProName }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('自定义编号') }}：</div>
          <div class="w320">{{ formInfo.CustomNo }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('车牌号') }}：</div>
          <div class="w320">{{ formInfo.CarNum }}</div>
        </div>
      </div> -->
      <!-- <div class="flex_align border-div">
        <div class="mr20">
          <div class="w130">{{ translate('合计重量') }}：</div>
          <div class="w320">{{ formInfo.TotalWeight }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('合计采保费') }}：</div>
          <div class="w320">{{ formInfo.TotalSafeAmt }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('合计检测费') }}：</div>
          <div class="w320">{{ formInfo.TotalCheckAmt }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('装卸费') }}：</div>
          <div class="w320">{{ formInfo.TotalPackAmt }}</div>
        </div>
      </div> -->
      <!-- <div class="flex_align border-div">
        <div class="mr20">
          <div class="w130">{{ translate('单据单号') }}：</div>
          <div class="w320">{{ formInfo.SourceBillNo }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('收货人') }}：</div>
          <div class="w320">{{ formInfo.Receiver }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('大类号') }}：</div>
          <div class="w320">{{ formInfo.LCNo }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('总金额') }}：</div>
          <div class="w320">{{ formInfo.TotalAmt }}</div>
        </div>
      </div> -->
      <!-- <div class="flex_align border-div">
        <div class="mr20">
          <div class="w130">{{ translate('说明') }}：</div>
          <div class="w320">{{ formInfo.Remark }}</div>
        </div>
      </div> -->
    </div>
    <div class="tableDetail">
      <el-table
        border
        :data="tableData"
        :header-cell-style="headerCellStyle"
        show-summary
        style="width: 100%"
      >
        <el-table-column :label="translate('序号')" type="index" />
        <!-- <el-table-column :label="translate('单位')">
          <template #default="{ row }">
            <div>{{ row.WHUnit }}</div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column :label="translate('存放地点')">
          <template #default="{ row }">
            <div>{{ row.StorageLocation }}</div>
          </template>
        </el-table-column> -->
        <el-table-column :label="translate('大类')">
          <template #default="{ row }">
            <div>{{ row.ItemCate }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('库位')">
          <template #default="{ row }">
            <div>{{ row.WSCode }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('物资编码')">
          <template #default="{ row }">
            <div>{{ row.ItemCode }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('物料名称')">
          <template #default="{ row }">
            <div>{{ row.ItemName }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column :label="translate('物资代码(大类)')">
          <template #default="{ row }">
            <div>{{ row.ItemSepc }}</div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column :label="translate('计划号')">
          <template #default="{ row }">
            <div></div>
          </template>
        </el-table-column> -->
        <el-table-column :label="translate('计量单位')" width="100">
          <template #default="{ row }">
            <div>{{ row.ItemUnit }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('库存数量')">
          <template #default="{ row }">
            <div>{{ row.StockQty }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('数量')" width="100">
          <template #default="{ row }">
            <div>{{ row.Qty }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('单价')" width="100">
          <template #default="{ row }">
            <div>{{ row.Price }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('金额')">
          <template #default="{ row }">
            <div>{{ row.ItemAmt }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column :label="translate('仓储费')">
          <template #default="{ row }">
            <div></div>
          </template>
        </el-table-column> -->
        <el-table-column :label="translate('仓库管理员')">
          <template #default="{ row }">
            <div>{{ row.WHManage }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('电话')">
          <template #default="{ row }">
            <div>{{ row.WHManageTel }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('用途')">
          <template #default="{ row }">
            <div>{{ row.Remark }}</div>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        border
        class="eltable2"
        :data="tableData2"
        :header-cell-style="headerCellStyle"
        style="width: 100%"
      >
        <el-table-column>
          <template #default="{ row }">
            <div class="flex_align">
              <div>用途：</div>
              <div>{{ row.value }}</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div class="flex_align borderStyle">
      <div class="mr20 content">
          <div class="w130">{{ translate('项目用途说明') }}：</div>
          <div class="w320">{{ formInfo.Remark }}</div>
        </div>
    </div> -->
    <div class="flex_align">
      <div class="mr20 w300">
        <span>{{ translate('领料单位主管') }}：</span>
        <span>{{ formInfo.PickingPerson }}</span>
      </div>
      <div class="mr20 w300">
        <span>{{ translate('审批') }}：</span>
        <span>{{ formInfo.PickingPerson }}</span>
      </div>
      <div class="mr20 w300">
        <span>{{ translate('领料人') }}：</span>
        <span>{{ formInfo.Receiver }}</span>
      </div>
      <div class="mr20 w300">
        <span>{{ translate('保管员') }}：</span>
        <span>{{ formInfo.Custodian }}</span>
      </div>
    </div>
  </div>
</template>
<script>
  import { translate } from '@/i18n'
  import JsBarcode from 'jsbarcode'
  export default {
    name: 'Detail',
    components: {},
    props: {
      form: {
        type: Object,
        default: () => {
          return {}
        },
      },
      fromprint: {
        type: String,
        default: '',
      },
      chileddetail: {
        type: Array,
        default: () => {
          return []
        },
      },
      supplierdata: {
        type: Array,
        default: () => {
          return []
        },
      },
      isprint: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['deletedchild'],
    data() {
      return {
        ItemList: [],
        itemChiledList: [],
        WmsData: [], // 选择物资数据
        formInfo: this.form,
        layout: 'total, sizes, prev, pager, next, jumper',
        pageNo: 1,
        pageSize: 10,
        radio: '',
        options: [],
        deleArr: [],
        tableData: this.chileddetail,
        searchChild: '',
        IsPrint: this.isprint,
        translate: translate,
        tableData2: [
          {
            value: this.form.Remark,
          },
        ],
        headerCellStyle: {
          background: '#ffffff !important',
          color: '#000000',
          'border-bottom': '1px solid #000000',
        },
      }
    },
    watch: {
      chileddetail(val) {
        console.log(val)
        this.tableData = val
        this.init()
      },
      form(val) {
        this.formInfo = val
        this.init()
      },
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        this.$nextTick(() => {
          const value = this.formInfo.Code; // 你的数字字符串
            console.log(value)
            const canvas = document.getElementById('barcode');
            console.log(canvas)
            JsBarcode(canvas, value, {
              format: "CODE128", // 或者使用其他格式如 "EAN" 等
              lineColor: "#000000",
              width: 2,
              height: 50,
              displayValue: false,
              margin: 1,
            })
          })

      }
    },
  }
</script>
<style lang="scss" scoped>
  .goodsDetail {
    font-size: 16px;
    // height: 600px;

    .goodsDetail-border {
      // border: 1px solid #000000;
      .border-div {
        // border-bottom: 1px solid;
        height: 60px;
        padding: 10px;
      }
      .border-div:last-child {
        border: none;
      }
    }
  }
  .title {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
  }
  .flex_align {
    display: flex;
    align-items: center;
  }
  .tableDetail {
    padding: 10px;
    .button-add {
      text-align: end;
      padding: 10px;
    }
  }
  .mr20 {
    margin-right: 20px;
  }
  .w130 {
    display: inline-block;
    width: 130px;
    text-align: right;
  }
  .w320 {
    display: inline-block;
    width: 180px !important;
  }
  .w300 {
    text-align: left;
    width: 320px !important;
    padding-left: 20px;
  }
  .mt20 {
    margin-top: 20px;
  }
  .mr10 {
    margin-right: 10px;
  }
  .cav {
      height: 30px;
    }
    .title2 {
      text-align: right;
    }
  .borderStyle {
    width: 1418px;
    margin: 0 auto;
    border: 1px solid;
    height: 100px;
    border-top: none;
    .content {
      height: 100%;
      line-height: 100px;
      width: 288px;
      border-right: 1px solid;
    }
  }
  ::v-deep .el-scrollbar__wrap {
    overflow-x: auto;
    height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式
  }
  ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }

  /**
改变边框颜色
 */
  ::v-deep .el-table--border,
  .el-table--group {
    border: 1px solid #000 !important;
  }
  /**
改变表格内竖线颜色
 */
  ::v-deep .el-table--border td,
  .el-table--border th,
  .el-table__body-wrapper
    .el-table--border.is-scrolling-left
    ~ .el-table__fixed {
    border-right: 1px solid #000 !important;
  }
  /**
改变表格内行线颜色
 */
  ::v-deep .el-table td,
  .el-table th.is-leaf {
    border-bottom: 1px solid #000 !important;
  }

  ::v-deep .el-table thead tr th {
    border-color: #000;
  }
  /* g改变表头字体颜色 */
  ::v-deep .el-table thead {
    color: #000000;
  }
  ::v-deep .eltable2 .el-table__row .el-table__cell {
    border-bottom: none !important;
  }
  @media print {
    @page {
      size: auto A4 landscape;
      margin: 6mm;
    }
    v-deep .el-table {
      border-collapse: collapse; /* 确保表格边框合并 */
      border: 1px solid #000; /* 设置表格边框样式 */
    }
    v-deep .el-table__row {
      border-bottom: 1px solid #000; /* 设置行边框样式 */
    }
    v-deep .el-table__cell {
      border-right: 1px solid #000; /* 设置单元格边框样式 */
    }
    .goodsDetail {
      /* margin: 20cm; */
      margin: 0 auto;
      /* 打印时缩放，防止页面溢出 */
      zoom: 0.73;
    }
    .cover {
      display: block;
    }
    .cav {
      height: 30px;
    }
    .title2 {
      text-align: right;
    }

    tr {
      /* 行被截断时自动换行 */
      page-break-before: always;
      page-break-after: always;
      page-break-inside: avoid;
    }
  }
</style>
